<template>
  <div class="PictureList">
    <el-scrollbar style="min-height: 80px">
      <div class="PictureList flex flex-wrap px-2 py-4">
        <template v-for="(item, index) in PictureList" :key="index">
          <div class="PictureItme mx-2 mb-3" style="width: 85px" v-if="!item.delete">
            <div class="mb-2 relative">
              <svg-icon
                v-if="props.type != 1 && handleType != 'view'"
                icon-class="state_fail_cover"
                class="absolute -right-1.5 -top-1.5 text-white z-10"
                @click="handleDel(item, index)"
              />
              <VImage
                v-if="props.imageType != 4"
                :src="item.url"
                :width="85"
                :height="85"
                :previewlist="photoSort(item, filterList(PictureList))"
              >
              </VImage>
              <video
                v-if="props.imageType == 4"
                :src="item.url"
                controls="controls"
                style="width: 85px; height: 85px"
              >
                您的浏览器不支持 video 标签。
              </video>
              <div
                class="absolute left-[1px] top-[1px] flex rounded-tl rounded-br overflow-hidden bg-[#000000]"
              >
                <div class="text-white text-xs px-1">
                  {{ computeImageType(item.url) }}
                </div>
              </div>
            </div>
            <div class="line1">{{ item.name }}</div>
            <div v-if="handleType != 'view'">
              <el-button
                type="primary"
                link
                @click="checkedTag(index, item.images_img_tag_list)"
                >编辑绩效标签</el-button
              >
            </div>
            <template v-if="props.imageType != 4">
              <SelectImageType
                v-if="!disabled"
                v-model="PictureList[index].image_for"
                placeholder="类型"
                clearable
                :options="options['gallery.GoodsSkuGalleryContents']?.[0].imageForText"
              ></SelectImageType>
              <template v-else> {{ PictureList[index].image_for_text }}</template>
            </template>
          </div>
        </template>
      </div>
    </el-scrollbar>
  </div>
  <batchImagesTag ref="batchImagesTagRef" @checked="checkedList"></batchImagesTag>
</template>
<script setup name="List">
import VImage from "@/components/Image/index.vue";
import { photoSort, computeImageType } from "@/utils/index";
import batchImagesTag from "@/components/batchImagesTag/index";
import { reactive, toRefs } from "vue";
import SelectImageType from "@/components/Selects/SelectImageType/index.vue";
let options = reactive(inject("options"));

let handleType = reactive(inject("handleType"));
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  imageType: {
    type: Number,
  },
  isMainPic: {
    type: Boolean,
    default: () => false,
  },
});
const PictureList = computed({
  get: () => {
    return props.modelValue;
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const data = reactive({
  firstIndex: "",
});

const { firstIndex } = toRefs(data);

const filterList = (list) => {
  return list.filter((i) => {
    if (!i.delete) {
      return i;
    }
  });
};

const handleDel = (item, index) => {
  if (handleType.value == "edit") {
    const findIndex = PictureList.value.findIndex((i) => i.id == item.id);
    if (findIndex == -1) return;
    PictureList.value[findIndex].delete = 1;
  } else {
    PictureList.value.splice(index, 1);
  }
};

const batchImagesTagRef = ref();
const checkedTag = (first, list) => {
  firstIndex.value = first;
  batchImagesTagRef.value.open("edit", list);
};

const checkedList = (list) => {
  PictureList.value[firstIndex.value].images_img_tag_list = list;
};
</script>

<style lang="scss" scoped></style>
